<template>
	<!-- 课程信息弹框，管理员可以继续在此页面操作课程、非管理员只能查看 -->
	<div class='kz-cont'>
		<div class='kz-wrapper'>
			<div class='kz-text'>
				<input type="button" style="width: 10%;" class="btn returnBtn" @click="goBack" value="返回"></input>
				<strong>
					<slot name='text'>{{title}}</slot>
				</strong>
			</div>
			<div class='footer'>
				<div class='kz-btn'>

					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">课程名</span>
						</div>
						<div class="weui-cell__ft">
							<input :disabled="canEdit" class="weui-input" v-model="showObject.caseName">
						</div>
					</a>
					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">课程图片</span>
						</div>
						<div class="weui-cell__ft ">
							<img @click="showImg" style="width: 20%;height: 20%;" :src="showObject.caseImgPath">
						</div>
					</a>

					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">课程描述</span>
						</div>
						<textarea style="color:rgb(160 151 151); margin-left: 0.625rem;" :disabled="canEdit"
							class="weui-textarea" v-model="showObject.caseDesc"></textarea>
					</a>

					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">学习目标</span>
						</div>
						<textarea style="color:rgb(160 151 151); margin-left: 0.625rem;" :disabled="canEdit"
							class="weui-textarea" v-model="showObject.caseDist" ></textarea>
					</a>

					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">适合人群</span>
						</div>
						<textarea style="color:rgb(160 151 151); margin-left: 0.625rem;" :disabled="canEdit"
							class="weui-textarea"v-model="showObject.casePeople" ></textarea>
					</a>

					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">课程原价</span>
						</div>
						<div class="weui-cell__ft ">
							<input :disabled="canEdit" class="weui-input" v-model="showObject.caseSale">
						</div>
					</a>
					<a class="weui-cell ">
						<div class="weui-cell__bd" style="display: inline-flex;">
							<span class="demo_badge_title fl">课程促销价</span>
						</div>
						<div class="weui-cell__ft ">
							<input :disabled="canEdit" class="weui-input" v-model="showObject.caseSaleDz">
						</div>
					</a>

					<div v-if="isSuper =='A'">
						<a @click="showUsers" class="weui-link"
							style="font-size: 12px;display: flex;margin: 0.3125rem 0.3125rem;">查看该课程当前已分配人员</a>
					</div>

					<div v-if="showDistributeFlag==true">
						<div class="weui-panel__hd">分配课程</div>
						<div
							class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd"><label class="weui-label">分配该课程给老师</label></div>
							<div class="weui-cell__bd" @click="showPicker">
								<span>{{pickerUserName}}</span>
							</div>
						</div>
						<button v-if="showSureFP" @click="distributeToStaff"
							class="weui-btn_cell weui-btn weui-btn_cell-primary">确定</button>
					</div>
					<div>
						<a v-if="isSuper =='A'" style="margin-right: 1.225rem;" @click='distribute'
							class="weui-btn_mini weui-btn_default">{{fenpei}}</a>
						<a v-if="isSuper =='A'" style="margin-right: 1.225rem;" @click='deleteCase'
							class="weui-btn_mini weui-btn_warn">删除</a>
						<a v-if="isSuper =='A'" @click="showEdit" class="weui-btn_mini weui-btn_cell_primary">编辑</a>
						<a v-if="showSave" @click="saveEdit" class="weui-btn_mini weui-btn_cell_primary">保存</a>
					</div>
				</div>
				<!-- <div class='kz-btn' @click='took'>确定</div> -->
			</div>
		</div>
		<!-- 确认弹框 -->
		<div class="js_dialog" v-show="isShowConfirmFlag" style="z-index: 1000;">
			<div class="weui-mask"></div>
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">确认删除</strong></div>
				<div style="word-wrap:break-word">
					您将把该课程从系统移除，</div>
				<div style="word-wrap:break-word">移除后需要重新录入，确认吗？</div>
				<div class="weui-dialog__ft">
					<a @click="beSure" style="color: #d40815;" class="weui-dialog__btn weui-btn_cell-warn">确认</a>
					<a @click="nodelete" class="weui-dialog__btn weui-btn_cell_primary">取消</a>

				</div>
			</div>
		</div>
		<!-- 图片预览 -->
		<div @click="hideImg" v-show="showImgPathFlag"
			style="z-index:2021;width: 100%;height: 100%;background-color: #a1a3a8;">
			<span>sfsdfdsfsdfds</span>
		</div>
		<!-- 当前课程所分配的人员 -->
		<showCaseUsers :caseShowUsers="caseShowUsers" :showMsgFlag="showUsersFlag"></showCaseUsers>
	</div>
</template>
<script>
	import constant from '@/utils/constant'
	import apis from '@/utils/apis'
	import showCaseUsers from '@/page/child/showCaseUsers'
	import {
		getAllYsUsers,
		getCaseObject,
		deleteCase,
		distributeToStaff,
		saveCaseEdit
	} from '@/apis/tech/tech'
	export default {
		components: {
			showCaseUsers,
		},
		name: 'showMsg',
		data() {
			return {
				showSave: false, //显示提交按钮
				canEdit: true, //页面不可编辑disabled属性
				showImgPath: "", //预览图片路径
				showImgPathFlag: false,
				caseShowUsers: [],
				showObject: {},
				showDistributeFlag: false, //显示分配内容
				showSureFP: false, //确定分配
				pickerUserList: [], //所有老師
				pickerUserAccount: "", //當前選中的老師的account
				pickerUserName: "请选择", //當前選中的老師的account
				currentCaseUsers: [], //当前选定的课程所有已分配的人员上课信息
				checkd: false,
				isShowConfirmFlag: false, //删除确认
				fenpei: '分配', //按钮描述
				showUsersFlag: false, //是否显示课程当前已分配人员
				isSuper: "", //是否超级管理员
				title: "", //标题
				caseNo: '', //该课程Id
				account: '', //登錄員工account
			}
		},
		created() {
			let params = this.$route.params;
			this.title = params.title;
			this.isSuper = params.isSuper;
			this.caseNo = params.caseNo;
			this.account = JSON.parse(localStorage.getItem("userInfo")).userInfo.account;
			if (this.isSuper == 'A') {
				//获取所有员工信息
				getAllYsUsers(apis.getAllYsUsers).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data != null) {
						let allUser = res.data;
						allUser.forEach(item => {
							let label = item.name
							let user = {
								value: item.account,
							}
							if (item.account == this.showObject.account) {
								label = label + " (disabled)"
							}
							user['label'] = label
							this.pickerUserList.push(user);
						})
					}
					
				}).catch(err => {
					
				})
			}
			this.getCaseObject();
		},
		methods: {
			saveEdit() {
				saveCaseEdit(apis.saveCaseEdit, this.showObject).then(res => {
					if (res.resultCode == constant.SUCCESS) {
						this.showMsg(res.resultMsg, "success")
						this.getCaseObject();
						this.showSave = !this.showSave;
						this.canEdit = !this.canEdit;
					} else {
						this.showMsg(res.resultMsg, "danger")
					}

				})

			},
			showEdit() {
				this.canEdit = !this.canEdit
				this.showSave = !this.showSave;
			},
			hideImg() {
				this.showImgPathFlag = false;
			},
			showImg() {
				this.showImgPathFlag = true;
				this.showImgPath = this.showObject.caseImgPath;
			},
			goBack() {
				this.$router.go(-1);
			},
			//查看课程人员
			showUsers() {
				this.showUsersFlag = true;
			},
			hideShowUsers() {
				this.showUsersFlag = false;
			},
			//獲取該課程的信息
			getCaseObject() {
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				let params = {
					caseNo: this.caseNo, //該課程號
					isSuper: this.isSuper, //
					account: this.account,
				};
				getCaseObject(apis.getCaseObject, params).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data != null) {
						this.showObject = res.data;
						this.caseShowUsers = this.showObject['accounts']
					}
					this.$hideLoading();
				}).catch(err => {
					this.$hideLoading();
				})
			},
			showPicker() {
				let that = this;
				this.$weui.picker(this.pickerUserList, {
					onChange: function(result) {
						console.log("showPicker change:" + result);
					},
					onConfirm: function(result) {
						console.log("showPicker onConfirm:" + result);
						that.pickerUserName = result[0].label;
						that.pickerUserAccount = result[0].value;
						that.showSureFP = true;
					},
					title: '选择人员'
				});
			},
			tocancel: function() {
				this.showDistributeFlag = false;
				this.isShowConfirmFlag = false;
				this.showSureFP = false;
				this.fenpei = "分配";
				this.pickerUserName = "请选择";

			},
			//分配按钮
			distribute: function() {
				this.showDistributeFlag = !this.showDistributeFlag;
				if (this.showDistributeFlag) {
					this.fenpei = "取消分配"
				} else {
					this.fenpei = "分配"
				}
				//this.tocancel();
			},
			distributeToStaff() {
				let param = {
					account: this.pickerUserAccount,
					caseNo: this.caseNo
				}
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				distributeToStaff(apis.distributeToStaff, param).then(res => {
					if (res.resultCode == constant.SUCCESS) {
						this.showMsg(res.resultMsg, "success")
					} else {
						this.showMsg(res.resultMsg, "danger")
					}
					this.$hideLoading();
				})
			},
			//删除按钮
			deleteCase: function() {
				this.isShowConfirmFlag = !this.isShowConfirmFlag;
				//this.tocancel();
			},
			//确认删除
			beSure() {
				this.isShowConfirmFlag = false;
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				deleteCase(apis.deleteCase, {
					caseNo: this.caseNo
				}).then(res => {
					if (res.resultCode == constant.SUCCESS) {
						this.showMsg(res.resultMsg, "success")
					} else {
						this.showMsg(res.resultMsg, "danger")
					}
					this.$hideLoading();
					this.goBack();
				})
			},
			//取消删除
			nodelete() {
				this.isShowConfirmFlag = false;
			},
			showMsg(text, type) {
				this.$toast({
					text: text,
					type: type || 'warning',
					duration: 1000
				});

			},

		},
		watch: {

		}
	}
</script>
<style scoped>
	@import "../../assets/css/returnBtn.css";

	input[disabled] {
		opacity: 1
	}
	textarea[disabled] {
		opacity: 1;
		color:#292534
	}

	.kz-cont {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 500;
		background: rgba(0, 0, 0, 0.3);
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
	}

	.kz-cont:after {
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		visibility: hidden;
		vertical-align: middle;
	}

	.kz-wrapper {
		height: 100%;
		width: 100%;
		overflow: auto;
		display: inline-block;
		vertical-align: middle;
		background: #fff;
		color: #333333;
		border-radius: 5px;
		max-width: 100%;
	}

	.kz-text {
		text-align: center;
		padding: 0.8375rem ;
	}

	.footer {
		display: flex;
		border-top: 1px solid #E5E5E5;

	}

	.kz-btn {
		flex: 1;
		padding: 12px;
		color: #488BF1;


	}

	.kz-btn+.kz-btn {
		border-left: 1px solid #E5E5E5;
	}

	.fl {
		display: grid;
	}
</style>
